
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="{{ static_url('css/bootstrap.min.css')}}">
    <title>PKU分院帽|假如穿越回京师大学堂，你会读哪一个专业？</title>
   <style>
   @keyframes play {
	100%{
		background-position: -737px -2px;
	}
}
@-webkit-keyframes play {
	100%{
		background-position: -737px -2px;
	}
}

.preload {
	background-position: 9999px 9999px;
	width: 1px;
	height: 1px;
	display: none;
}

body {
	background: url(bgf.jpg) no-repeat #E8DFD0;
	background-size: cover;
	background-position: center top;
}
html, body{
	margin: 0;
	width: 100%;
	height: 100%;
}

.cover {
	background: url(share.png) top right no-repeat;
	background-size: 50%;
	background-color: rgba(0, 0, 0, 0.7);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: none;
}

.decode .inner {
	width: 100%;
	height: 100%;
	background: url({{ static_url('img/decode.png')}}) center no-repeat;
	background-size: 80%;
}

.item {
	width: 100%;
	text-align: center;
	padding-top: 20%;
}

.main_block{
	background-color:rgba(0,0,0,0.35);
	width: 100%;
	height: 50%;
	margin: 0 auto;
	position: fixed;
	bottom: 0;
	color: #fff;
}

a{color: #fff !important;}
a:hover{color: #fff !important;}
a:visited{color: #fff !important;}

   </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body style="background-image:url({{ static_url('img/icon.jpg') }});background-position:center; background-repeat:repeat-y">

	<div style="position:absolute; bottom:10%;left:0%;right:0%">
        <h3 align = "center" style="color:black"><B>假如穿越回京师大学堂<br/>你会读哪一个专业？</B></h3>
		<div class="center-block col-xs-6" style="float:none;">		
			<div class="form-group">
				<input type="text" class="form-control" id="name" placeholder="请输入尊姓大名">
			</div>
            <button type="submit" id="submit" class="btn btn-default" style="background:url({{ static_url('img/buttonColor.jpg')}});width:100%;color:white;font-size:30p"><B>来分院~</B></button>
            <input type="file" accept="image/*;capture=camera"/>
            <div id="result" align="center"></div>

        </div>


	</div>
    <div style="position:absolute; bottom:0.5%;left:0;right:0;text-align:right;">
        <p>&copy; 北大官微 <br><a href="http://mp.weixin.qq.com/s?__biz=MzA3OTE0MjQzMw==&mid=206137314&idx=1&sn=c4fd752083f45b29222aeb628f369e86#rd"><B style="color:black">点此关注北京大学 </B></a></p>
	</div>

    <div class="cover decode">
        <div class="inner"></div>
    </div>
<script type="text/javascript" src="{{ static_url('js/jquery.js')}}"></script>
    <script type="text/javascript" src="{{ static_url('js/localResizeIMG.js')}}"></script>

    <!--   mobileBUGFix.js 兼容修复移动设备       -->
    <script src="{{ static_url('js/mobileBUGFix.mini.js')}}" type="text/javascript"></script>
    <script type="text/javascript">
        $("input:file").localResizeIMG({
            width: 50,
            quality: 0.8,
            success: function (result) {
                var img = new Image();
                img.src = result.base64;
                console.log(result.clearBase64);
                //$("body").append(img);
                $("#result").empty();
               // $("#result").append(img); //呈现图像(拍照結果)
                $.ajax({
                    url: "img",
                    type: "POST",
                    data:{formFile:result.base64},
                    dataType: "HTML",
                    timeout: 1000,
                    error: function(){
                        alert("Error loading PHP document");
                    },
                    success: function(result){
                        //alert(result);
                        var img = new Image();
                        img.src = result;
                        //console.log(result);
                        $("#result").append(img);
                        //alert("Uploads success~")
                    }
                });
            }

        });
    </script>
    <script src="{{ static_url('js/jquery.js')}}"></script>
    <script src="{{ static_url('js/index.js')}}"></script>
    <script src="{{ static_url('js/bootstrap.min.js')}}"></script>
</body>
</html>